<script src="<?= base_url() ?>js/facebox.js" type="text/javascript"></script>
<?php echo link_tag('css/facebox.css'); ?>


<style>
    .ui-timepicker-div .ui-widget-header {
        margin-bottom: 8px;
    }

    .ui-timepicker-div dl {
        text-align: left;
    }

    .ui-timepicker-div dl dt {
        height: 25px;
        margin-bottom: -25px;
    }

    .ui-timepicker-div dl dd {
        margin: 0 10px 10px 65px;
    }

    .ui-timepicker-div td {
        font-size: 90%;
    }

    .ui-tpicker-grid-label {
        background: none;
        border: none;
        margin: 0;
        padding: 0;
    }

    .ui-timepicker-rtl {
        direction: rtl;
    }

    .ui-timepicker-rtl dl {
        text-align: right;
    }

    .ui-timepicker-rtl dl dd {
        margin: 0 65px 10px 10px;
    }
</style>
<script src="<?= base_url() ?>js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script type="text/javascript" src="<?= base_url();?>js/jquery.datepick.js"></script>



<div style='width:950px;overflow: hidden;margin-left:5px;'>
    <div class="current_settings" style="float:left;">
        <div class="sett_title"><b>Aktuálne parametre vyhľadávania</b></div>
        <div class="currentDate"></div>
        <div class="currentTime"></div>
        <div class="currentType"></div>
        <div class="currentArea"></div>
        <div class="currentLimit"></div>
        <div class="currentComment"></div>
        <div class="currentThumb"></div>
    </div>
    <div class="helper" style="float:left;">
        <div class="helper_title">Ako správne vyhľadávať?</div>
        <div class="helper_content">
            <div class="content_help">Vedľa mapy kliknite na jedno z kritérií. Po kliknutí vyberiete požadované
                parametre vyhľadávania.
            </div>
            <br>
            <b>Možnosti výberu: </b>
            <ul style="list-style-type:none;">
                <li class="help_list1" style="background-position: 80px;">Výber dátumu:</li>
                <li class="help_list2" style="background-position: 70px;">Výber času:</li>
                <li class="help_list3" style="background-position: 110px;">Výber typu udalosti:</li>
                <li class="help_list4" style="background-position: 70px;">Výber kraja:</li>
                <li class="help_list5" style="background-position: 75px;">Výber limitu:</li>
                <li class="help_list6" style="background-position: 102px;">Výber komentárov:</li>
                <li class="help_list7" style="background-position: 94px;">Výber relevancie:</li>
            </ul>
        </div>
        <div class="search_button">Hľadaj!</div>
    </div>

    <div style='float:left;border-radius:10px;overflow:hidden;'>
        <?php echo $map['html']; ?>
    </div>

    <div class="settings" id="accordion" style="font-size:10px">
        <div class="pick_date">Dátum</div>
        <div class="date_pick_area"><input type="text" id="popupDatepicker"/></div>
        <div class="pick_time">Čas</div>
        <div class="time_pick_area">Od: <input type="text" id="time1" value="00:00"/>Do: <input type="text" id="time2"
                                                                                                value="23:59"/></div>
        <div class="pick_type">Typ</div>
        <div class="type_pick_area">
            <div id="type1" class="checkbox_route checkbox_route_checked">Radary</div>
            <div id="type2" class="checkbox_route checkbox_route_checked">Hliadky</div>
            <div id="type3" class="checkbox_route checkbox_route_checked">Nehody</div>
            <div id="type4" class="checkbox_route checkbox_route_checked">Mobilné radary</div>
        </div>
        <div class="pick_area">Kraj</div>
        <div class="area_pick_area">

            <?php
            if (isset($div)) {
                for ($i = 1; $i < count($div); $i++) {
                    echo $div[$i];
                }
            }
            ?>

        </div>
        <div class="limit_area">Limit</div>
        <div class="limit_pick_area">
            <div id="limit1" class="checkbox_route">10</div>
            <div id="limit2" class="checkbox_route checkbox_route_checked">20</div>
            <div id="limit3" class="checkbox_route">30</div>
            <div id="limit4" class="checkbox_route">50</div>
            <div id="limit5" class="checkbox_route">100</div>
        </div>

        <div class="comments_area">Komentáre</div>
        <div class="comments_pick_area">
            <div id="comment1" class="checkbox_route">má</div>
            <div id="comment2" class="checkbox_route">nemá</div>
            <div id="comment3" class="checkbox_route checkbox_route_checked">nezáleži</div>
        </div>
        <div class="thumbs_area">Relevancia</div>
        <div class="thumbs_pick_area">
            <div id="thumb1" class="checkbox_route">má
                iba <?php $img_up = base_url() . "css/images/up.png";  echo "<img src='$img_up'>"; ?></div>
            <div id="thumb2" class="checkbox_route">má
                iba <?php $img_down = base_url() . "css/images/down.png";  echo "<img src='$img_down'>"; ?></div>
            <div id="thumb3" class="checkbox_route">má
                viac <? echo " <img src='$img_up'> ako <img src='$img_down'>"; ?></div>
            <div id="thumb4" class="checkbox_route checkbox_route_checked">nezáleži</div>
        </div>

    </div>
</div>